Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
masonry-layout
Advanced tools
The masonry-layout npm package is a JavaScript library for creating dynamic, grid-based layouts. It arranges elements vertically, positioning each element in the next open spot in the grid, much like a mason fitting stones in a wall. This layout is often used for image galleries, portfolios, and other content-heavy websites.
Basic Grid Layout
This feature allows you to create a basic grid layout. The code initializes a Masonry instance on a container element with the class 'grid' and specifies the item selector and column width.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: 200
});
Responsive Layout
This feature enables a responsive layout. The code uses a grid-sizer element to define column width and sets percentPosition to true for percentage-based positioning.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
Adding Items Dynamically
This feature allows you to add items dynamically to the grid. The code creates a new grid item, appends it to the grid, and then informs Masonry about the new item using the appended method.
const Masonry = require('masonry-layout');
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: 200
});
const newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
msnry.appended(newItem);
Isotope is a JavaScript library for creating dynamic, filterable, and sortable grid layouts. It offers more advanced features compared to masonry-layout, such as filtering and sorting of grid items. It is also more customizable and has a larger community and more extensive documentation.
Packery is another grid layout library that offers a more flexible and customizable layout compared to masonry-layout. It allows for draggable and resizable grid items, making it suitable for more interactive and complex layouts.
Muuri is a versatile grid layout library that combines the features of Masonry, Packery, and Isotope. It offers drag-and-drop, filtering, sorting, and responsive layouts. Muuri is highly customizable and provides a comprehensive API for advanced use cases.
Cascading grid layout library
Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
See masonry.desandro.com for complete docs and demos.
Link directly to Masonry files on unpkg.
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
npm: npm install masonry-layout --save
Bower: bower install masonry-layout --save
Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.
With jQuery
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
With vanilla JavaScript
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
// init with selector
var msnry = new Masonry( '.grid', {
// options...
});
With HTML
Add a data-masonry
attribute to your element. Options can be set in JSON in the value.
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
Masonry is released under the MIT license. Have at it.
Made by David DeSandro
FAQs
Cascading grid layout library
We found that masonry-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.